<template>
  <view class="page-container" :class="{'bg-87': loading && list.length>0}">
    <scroll-view scroll-y="true" class="page-body py-20 ">
     <view class="p-20" v-if="loading && list.length>0">
       <view v-for="(item, index) in list" :key="item.id"
         class="flex items-center w-full py-12 bg-ff mb-16 px-20 rounded-20">
         <view class="flex flex-1 items-center justify-start">
           <image v-if="index === 0&&item.score >0" src="/static/images/rank-01.png" class="w-60 h-80"></image>
           <image v-else-if="index===1&&item.score>0" src="/static/images/rank-02.png" class="w-60 h-80"></image>
           <image v-else-if="index===2&&item.score>0" src="/static/images/rank-03.png" class="w-60 h-80"></image>
           <view v-else class="w-60 text-center font-bold">{{index+1}}</view>
           <image :src="utils.avatar(item.avatar)" class="w-100 h-100 rounded-full mx-24" mode="aspectFill"></image>
           <view class="font-bold">{{item.userName}}</view>
         </view>
         <view class="">获得<text class="text-error">{{item.score}}</text>分</view>
       </view>
     </view>
      <up-empty marginTop="100" text="暂无排名数据" v-if="loading && list.length===0"></up-empty>
    </scroll-view>
  </view>
</template>
<script setup>
import { ref} from 'vue'
import {onLoad} from "@dcloudio/uni-app"
import utils from '@/utils/utils.js'
import  {subject} from '@/api'
import useUserStore from '@/store/user.js'
const useStore = useUserStore()
const list = ref([])
const loading = ref(false)
onLoad((options) => {
  if(options.id){
    uni.showLoading({title: '加载中'})
    subject.getSubjectRank({categoryId: options.id, limit: 100}).then(res => {
      if(res.code===0){
        list.value = res.data || []
        console.log('list', list.value)
      }
    }).catch(error => {
      console.log('error', error)
    }).finally(() => {
      loading.value = true
      uni.hideLoading()
    })
  }

})
</script>
<style scoped lang="scss">
</style>